@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <!-- 返回首页按钮 -->
            <div class="mb-3">
                <a href="{{ route('home') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> 返回首页
                </a>
            </div>

            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <span>用户列表</span>
                        <!-- <a href="{{ route('users.create') }}" class="btn btn-primary btn-sm">添加用户</a> -->
                    </div>
                </div>

                <div class="card-body">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>编号</th>
                                <th>姓名（昵称）</th>
                                <th>邮箱</th>
                                <th>权限</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($users as $user)
                            <tr>
                                <td>{{ $user->id }}</td>
                                <td>{{ $user->name }}</td>
                                <td>{{ $user->email }}</td>
                                <td>
                                    <select class="form-select form-select-sm permission-select" 
                                            data-user-id="{{ $user->id }}"
                                            name="attribute_id">
                                        @foreach($permissions as $permission)
                                            <option value="{{ $permission->id }}" 
                                                {{ $user->attribute_id == $permission->id ? 'selected' : '' }}>
                                                {{ $permission->remarks }}
                                            </option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>{{ $user->created_at->format('Y-m-d H:i:s') }}</td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-primary update-permission-btn" 
                                            onclick="updatePermission({{ $user->id }})">更新</button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>

                    @if($users->hasPages())
                    <div class="mt-4">
                        {{ $users->appends(request()->except('page'))->links() }}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    window.updatePermission = function(userId) {
        const select = document.querySelector(`select[data-user-id="${userId}"]`);
        const attributeId = select.value;

        $.ajax({
            url: `/users/${userId}/permission`,
            method: 'PATCH',
            data: {
                attribute_id: attributeId
            },
            success: function(response) {
                alert('权限更新成功');
                console.log('更新成功:', response);
            },
            error: function(xhr, status, error) {
                alert('更新失败，请重试');
                console.error('更新失败:', error);
                console.log('错误详情:', xhr.responseText);
            }
        });
    }
});
</script>
@endsection